<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品发布所有数据</title>
    <script type="text/javascript" src="js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/echarts/5.1.1/dist/echarts.js}"></script>
    <style>
        #container{
            width: 1200px;
            height: 600px;
            margin: 30px 0px;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
    const x_category = [];
    // 获取 商品分类 做x轴数据
    $.ajax({
        type: 'get',
        url: '/category/getAllCategory',
        dataType: 'json',
        success:function(data){
            let length = data.length;
            for (var i = 1; i<length;i++) {
                if(data[i]['cateName'] !== null) {
                    x_category.push(data[i]['cateName']);
                }
            }
        }
    });

    let todayValues = [];
    let onOfferValues = [];
    let sellOutValues = [];
    let soldOutValues = [];
    // 获取各条件下的y轴数据
    $.ajax({
        type:'post',
        url:'/echarts/getCommodityPublishAll',
        dataType:'json',
        success:function (data) {
            console.log(data);
            todayValues = data[0];
            onOfferValues = data[1];
            sellOutValues = data[2];
            soldOutValues = data[3];
console.log(todayValues);
            getChart();
        },
        error:function(error){
            //请求失败时执行该函数
            alert("图表请求数据失败!");
        }
    });

    // 绘制图表
    function getChart(){
        //1.获取容器dom元素
        const dom = document.getElementById("container");
        //2.实例化echart对象
        const charts = echarts.init(dom);
        charts.hideLoading();


        //4.设定配置
        const option = {
            title: {
                //4.1添加标题文本
                text: "商品发布数据情况"
            },
            //4.2添加提示组件
            tooltip: {
                show:true,
                trigger:'item',
                trigger: 'axis',
            },
            legend: {
                //4.3定义图例的显示内容
                show:true,
                data: ['今日发布', '出售中', '已售罄', '已下架']
            },
            xAxis: {
                //4.4 定义x轴数据
                axisTick: { show: false },
                data: x_category
            },
            yAxis: {},
            series: [
                {
                    name: '今日发布',
                    type: 'bar',
                    barGap: 0,
                    emphasis: {
                        focus: 'series'
                    },
                    data: todayValues
                },
                {
                    name: '出售中',
                    type: 'bar',
                    barGap: 0,
                    emphasis: {
                        focus: 'series'
                    },
                    data: onOfferValues
                },
                {
                    name: '已售罄',
                    type: 'bar',
                    barGap: 0,
                    emphasis: {
                        focus: 'series'
                    },
                    data: sellOutValues
                },
                {
                    name: '已下架',
                    type: 'bar',
                    barGap: 0,
                    emphasis: {
                        focus: 'series'
                    },
                    data: soldOutValues
                }
            ]
        };
        //5.使用定义好的配置项显示数据
        charts.setOption(option);
        charts.hideLoading();
    };
</script>
</body>
</html>